<template>
  <!--直播课程-->
  <div>
    <!--选择-->
    <div style="padding-top: 40px;color: #22944E">
      <el-radio @click="radio = item.name" v-model="radio" :label="item.name" border v-for="item in typeList">{{item.name}}</el-radio>
    </div>
    <!--搜索框-->
    <div class="ssk">
      <el-input
        placeholder="请输入搜索内容"
        prefix-icon="el-icon-search"
        v-model="values"
        style="height: 48px;width: 480px;font-size: 16px;border-top-right-radius: 0;border-bottom-right-radius: 0;"
      >
      </el-input>
      <div class="xian"></div>
      <el-button type="primary" class="ssan" @click="serchList()">搜索</el-button>
    </div>
    <!--课程列表-->
    <div class="curriculum-cc" v-for="(item1,index1) in childList" :key="index1" :style="{marginRight:(index1+1)%5==0?'0':'20px'}">
      <img src="@/assets/images/home/tu1.png" alt="" v-if="item1.fileUrl == null">
      <img :src="$store.state.prefixImg + item1.fileUrl" alt="" v-else>
      <div class="curriculum-tit ccsl">{{item1.liveName}}</div>
      <div class="curriculum-bottom">
        <div class="jifen">
          <img src="@/assets/images/home/integral.png" alt="">
          <span>{{item1.integral}}积分</span>
        </div>
        <div class="llrs">
          <img src="@/assets/images/home/renshu.png" alt="">
          <span>{{item1.pageViews}}</span>
        </div>
        <span class="keshi">{{item1.liveD}}</span>
        <span class="shijian1">{{item1.liveTime}}</span>
        <div class="btn" v-if="item1.liveType!='预告'" @click="toPath(item1.id,item1.liveType)">立即观看</div>
        <div class="btn" v-else>敬请期待</div>
      </div>
    </div>
    <!--分页器-->
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page.sync="pagination.currentPage"
      :page-size="20"
      layout="total, prev, pager, next"
      :total="pagination.total"
      prev-text="上一页"
      next-text="下一页">
    </el-pagination>
  </div>
</template>

<script>
  import {liveSelectLiveList,livejudgeLive} from '@/request/api'
  export default {
    data() {
      return {
        valueTime: '',
        radio: '正在直播',
        topOrBottom: true,
        placeholder: '请输入搜索内容',
        index: 0,
        values: '',
        childList:[],
        typeList: [{name:'正在直播'},{name:'预告'},{name:'回放'}],
        /*   -------分页-------- */
        pagination: {
          currentPage: 1,//当前页
          total: 0//共多少条
        },
      }
    },
    created() {
      this.getList()
    },
    watch: {
      radio(value) {
        this.getList()
      }
    },
    methods: {
      getList() {
        const loading = this.openLoading();
        const parameter = {
          _search: true,
          "bgTm": "",
          "endTm": "",
          "liveName": this.values,
          "liveTeacherName": "",
          "liveType": this.radio,
          pageSize: 20,
          pageNumber: this.pagination.currentPage || 1,
          type: 0,//上下架状态
        }
        liveSelectLiveList(parameter).then(res=> {
          if(res.code == 200) {
            this.childList = res.data.records
            if(this.childList.length!=0) {
              this.childList.forEach(e=>{
                e.liveD = e.liveTime.split(' ')[0]
                e.liveTime = e.liveTime.split(' ')[1]
              })
            }else {
              this.$message({
                message: '暂无',
                type: 'warning',
                offset: '500'
              });
            }
            this.pagination.total = res.data.total
          }
          loading.close();
        }).catch(() => {
          loading.close();
        })
      },
//      搜索
      serchList() {
        this.pagination.currentPage=1
        this.radio = ''
        this.getList()
      },
//      去详情
      toPath(id,type) {
          var params={
            liveId:id,
            userId:JSON.parse(localStorage.getItem('userInfo')).id
          }
        livejudgeLive(params).then(res=> {
          if(res.code==200) {
              if(res.data) {
                this.$router.push({
                  name:'itIsLive',
                  params: {
                    id: id
                  }
                })
              }else {
                this.$message({
                  message: '暂无观看权限',
                  type: 'warning',
                  offset: '500'
                });
              }
          }
        })

      },
//      换页
      handleCurrentChange(val) {
        this.pagination.currentPage = val
        console.log(`当前页: ${val}`);
        this.getList()
      }
    }
  }
</script>
<style scoped="">
  /*/deep/*/
  /*.el-select, .el-input {*/
  /*display: inline-block;*/
  /*}*/

  .left {
    width: 100%;
    height: auto;
  }
  .left .top {
    width: 100%;
    height: auto;
    padding: 5px;
    border-bottom: 1px dashed #ccc;
  }
  .left img {
    width: 80px;
    height: 80px;
    float: left;
  }
  .left h6 {
    display: inline-block;
    float: left;
    color: #333;
    font-size: 16px;
    padding: 10px 0;
    line-height: 2em;
    margin-left: 16px;
    font-weight: 400;
  }
  .left span {
    color: #999999;
    font-size: 14px;
    cursor: pointer;
  }
  .item {
    display: inline-block;
    box-sizing: content-box;
    width: 64px;
    padding: 0 63px;
    border-right: 1px dashed #e5e5e5;
    height: 80px;
    line-height: 80px;
    overflow: hidden;
    font-weight: 700;
    font-size: 20px;
  }
  .item span {
    display: block;
    margin-top: 10px;
    color: #999;
    font-size: 16px;
  }
  .item h3 {
    width: 100%;
    text-align: center;
    color: #333;
    font-size: 24px;
    margin-top: 15px;
  }
  .item .bottom {
    width: 100%;
    height: auto;
    padding: 30px;
    background: #fff;
    border-right: 4px;
    margin-top: 15px;
  }

  .ssk {
    display: block;
    width: 600px;
    margin: 40px 0 28px;
  }
  .ssan {
    width: 120px;
  }
  /deep/
  .el-radio.is-bordered.is-checked {
    border-color: #22944E;
  }
  /deep/
  .el-radio__input.is-checked .el-radio__inner {
    border-color: #22944E;
    background: #22944E;
  }
  /deep/
  .el-radio__input.is-checked+.el-radio__label {
    color: #22944E;
    font-size: 18px;
    font-weight: bold;
  }
</style>
